<!-- 页面文件，例如：ProductList.vue -->
<template>
   <view class="content" style="background-color: #f8f8f8;height: 100vh;">
     <view class="product-list" v-if="id!=4">
       <detail
         v-for="item in products"
         :key="item.id"
         :product="item"
       />
     </view>
     <view class="service-center-card" v-else>
       <view class="tu1">
         <image src="https://env-00jxt1fzew48.normal.cloudstatic.cn/home/qiche.png" class="service-image" />
       </view>
       <view class="service-info flex-direction margin-top radiu-10 padding">
         <view class="service-hours">
            <view class="text-bold text-lg color-black">工作时间:</view>
            <view class="time text-df color-grey margin-top"><u-icon name="https://env-00jxt1fzew48.normal.cloudstatic.cn/home/time.png" size="36"></u-icon>   7:00 - 23:00</view>
         </view>
         <view class="service-address margin-top">
             <view class="text-bold text-lg color-black">门店地址:</view>
             <view class="address margin-top"><u-icon name="https://env-00jxt1fzew48.normal.cloudstatic.cn/home/daohang.png" size="36"></u-icon>xx省xx市xx区xx路128号</view>
         </view>
       </view>
     </view>
   </view>
</template>

<script>


export default {
  
  data() {
    return {
      id:1,
      products: [
        {
          id: 1,
       // 示例图片路径
           image: 'https://env-00jxt1fzew48.normal.cloudstatic.cn/home/detial.png',
          title: '[消费券直抵] 哈普红油哈普车业哈普贴膜',
          price: 99,
          sold: 568
        },
        {
          id: 2,
    image: 'https://env-00jxt1fzew48.normal.cloudstatic.cn/home/detial.png',
          title: '[消费券直抵] 哈普红油哈普车业哈普贴膜',
          price: 199,
          sold: 568
        }
      ]
    };
  },
  onLoad(options){
    this.id=options.id
    console.log(this.id);
  }
}
</script>

<style>
.product-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.service-center-card {
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  overflow: hidden;
  margin: 10px;
  
}
.service-image {
  width: 100%;
  height: 352rpx; /* 根据需要调整高度 */
}
.service-info {
  height: 316rpx;
  padding: 10px;
  display: flex; /* 使用 Flexbox 布局 */
  flex-direction: column; /* 竖直方向排列 */
  justify-content: space-between; /* 平分空间 */
  background-color: #ffffff;
}

.service-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.service-hours,
.service-address {
  font-size: 14px;
  color: #666;
  flex: 1; /* 使每一行平分空间 */
}



</style>